    <template>
    <div class="eightbox">
        <div class="index_part_title">
            <span> <i class="el-icon-s-custom"></i>资金记录</span>
            <i class="el-icon-refresh refresh"
                @click="$bus.$emit('refresh', 'coin')"></i>
        </div>
        <div class="index_eight_body">
            <div class="index_eight_top">
                <div class="index_eight_top_item">
                    <div>
                        <img src="./../../../assets/img/index/eight1.png"
                            alt="">
                    </div>
                    <div>
                        <p>
                            <span>{{data['总注册量']}}</span>
                            <span>总注册量</span>
                        </p>
                        <p>
                            <span>{{data['会员量']}}</span>
                            <span>会员量</span>
                        </p>
                    </div>
                </div>
                <div class="index_eight_top_item">
                    <div>
                        <img src="./../../../assets/img/index/eight2.png"
                            alt="">
                    </div>
                    <div>
                        <p>
                            <span>{{data['总流通币量']}}</span>
                            <span>总流通币量</span>
                        </p>
                        <p>
                            <span>{{data['总发行量']}}</span>
                            <span>总发行量</span>
                        </p>
                    </div>
                </div>
                <div class="index_eight_top_item">
                    <div>
                        <img src="./../../../assets/img/index/eight3.png"
                            alt="">
                    </div>
                    <div>
                        <p>
                            <span>{{data['总交易量']}}</span>
                            <span>总交易量</span>
                        </p>
                        <p>
                            <span>{{data['总奖励量']}}</span>
                            <span>总奖励量</span>
                        </p>
                    </div>
                </div>
                <div class="index_eight_top_item">
                    <div>
                        <img src="./../../../assets/img/index/eight4.png"
                            alt="">
                    </div>
                    <div>
                        <p>
                            <span>{{data['当前价格']}}</span>
                            <span>当前价格</span>
                        </p>

                    </div>
                </div>

            </div>
            <div class="index_eight_bottom">
                <div class="index_eight_bottom_item">
                    <p>{{data['求购中总量（笔）']}}</p>
                    <p>求购中总量(笔)</p>
                </div>
                <div class="index_eight_bottom_item">
                    <p>{{data['求购中总量（币）']}}</p>
                    <p>求购中总量(币)</p>
                </div>
                <div class="index_eight_bottom_item">
                    <p>{{data['总充币量（币）']}}</p>
                    <p>总充币量(币)</p>
                </div>
                <div class="index_eight_bottom_item">
                    <p>{{data['总交易手续费（币）']}}</p>
                    <p>总交易手续费(币)</p>
                </div>
                <div class="index_eight_bottom_item">
                    <p>{{data['总互转手续费（币）']}}</p>
                    <p>总互转手续费(币)</p>
                </div>
                <div class="index_eight_bottom_item">
                    <p>{{data['总兑币手续费（币）']}}</p>
                    <p>总兑币手续费(币)</p>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data () {
        return {};
    },
    props: {
        data: {
            type: Object,
            default: () => ({})
        }
    },
    components: {},
    methods: {}
};
</script>
<style lang="less" scoped>
.eightbox {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.index_eight_body {
    width: 100%;
    padding: 20px;
    background-color: #ffffff;
    display: flex;
    flex-flow: column;
    justify-content: flex-start;
    align-items: center;
    border-radius: 5px;
    box-shadow: 0px 5px 20px #e4e4e4;
    > div:nth-of-type(2) {
        margin-bottom: 0;
    }
    > div {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;
        .index_eight_top_item:nth-of-type(1) {
            > div:nth-of-type(1) {
                background-color: #69c0ff;
            }
        }
        .index_eight_top_item:nth-of-type(2) {
            > div:nth-of-type(1) {
                background-color: #ff9c6e;
            }
        }
        .index_eight_top_item:nth-of-type(3) {
            > div:nth-of-type(1) {
                background-color: #ffd666;
            }
        }
        .index_eight_top_item:nth-of-type(4) {
            > div:nth-of-type(1) {
                background-color: #5cdbd3;
            }
        }
        .index_eight_top_item {
            flex: 1;
            margin-right: 15px;
            border-radius: 10px;
            overflow: hidden;
            > div:nth-of-type(1) {
                width: 100%;
                height: 60px;
                background-color: #69c0ff;
                display: flex;
                justify-content: center;
                align-items: center;
                img {
                    width: 40px;
                }
            }
            > div:nth-of-type(2) {
                width: 100%;
                height: 80px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                background-color: #fbfbfb;
                > p {
                    flex: 1;
                    height: 100%;
                    display: flex;
                    flex-flow: column;
                    justify-content: center;
                    align-items: center;
                    > span:nth-of-type(1) {
                        font-size: 30px;
                        font-weight: 400;
                        color: #515a6e;
                    }
                    > span:nth-of-type(2) {
                        font-size: 14px;
                        font-weight: 400;
                        color: #515a6e;
                    }
                }
                > p:nth-of-type(2) {
                    border-left: 1px solid #ebebeb;
                }
            }
        }
        .index_eight_top_item:last-of-type {
            margin-right: 0;
        }
        .index_eight_bottom_item {
            flex: 1;
            display: flex;
            flex-flow: column;
            justify-content: flex-start;
            align-items: flex-start;
            background-color: #fbfbfb;
            margin-right: 15px;
            padding: 15px 20px;
            > p:nth-of-type(1) {
                font-size: 32px;
                font-weight: 400;
                color: #515a6e;
                padding-bottom: 15px;
            }
            > p:nth-of-type(2) {
                font-size: 14px;
            }
        }
        .index_eight_bottom_item:last-of-type {
            margin-right: auto;
        }
    }
}
</style>
